<template>
  <div class="login-wrapper">
    <header class="login-header">模板项目</header>
    <main class="login-main">
      <el-form class="login-form" ref="loginForm" :model="loginForm" :rules="rules" size="medium">
        <el-form-item prop="phone">
          <el-input v-model="loginForm.phone" type="tel" placeholder="请输入手机号码" role="name" autocomplete :autofocus="true" tabindex="1"></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input v-model="loginForm.password" type="password" showPassword placeholder="6-20位字符，包含字母、数字" minlength="6" maxlength="20" tabindex="2"></el-input>
        </el-form-item>
        <el-form-item class="login-btn">
          <el-button type="primary" @click="submitLogin()" :loading="loadingSubmit" tabindex="6">登&emsp;录</el-button>
        </el-form-item>
      </el-form>
    </main>
  </div>
</template>

<script>
import { phoneValidator, passwordValidator } from '@/utils/validate'
import { Token } from '../utils/storage.js'
// import path from 'path'

export default {
  data() {
    return {
      loadingSubmit: false,
      showPassword: false,
      loginForm: {
        phone: '',
        password: ''
      },
      rules: {
        phone: [
          { required: true, message: '请填写手机号码', triggle: 'blur' },
          { validator: phoneValidator, trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请填写密码', triggle: 'blur' },
          { validator: passwordValidator, trigger: 'blur' }
        ]
      }
    }
  },
  computed: {},
  destroyed() {},
  created() {},
  methods: {
    submitLogin() {
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          this.$message.success('登录成功')
          const data = {
            token: '145f1sd56rf1asd56156asd156as',
            userInfo: {
              id: '156165sr1sd65f2d156',
              phone: this.loginForm.phone,
              userName: 'admin'
            }
          }
          this.$store.commit('setUserInfo', data.userInfo)
          Token.set(data.token)
          const redirect = this.$route.query && this.$route.query.redirect
          this.$router.push({
            path: redirect || '/'
          })
        }
      })
    }
  }
}
</script>

<style lang="stylus" scoped>
.login-wrapper
  width 1000px
  margin 0 auto

.login-header
  font-size 32px
  font-weight bold
  color $color-primary
  margin-top 80px
  margin-bottom 120px
  text-align center

.login-main
  display flex
  justify-content center
  align-items center
  .login-thumb
    width 400px
    margin-right 80px
    img
      width 100%
  .login-form
    width 360px
  .sms-btn
    margin 0
    color $color-primary
  .auto-login
    font-size 12px
    margin-top 36px
    margin-bottom 4px !important
  .login-btn
    margin-bottom 4px !important
    .el-button
      width 100%
</style>
